<template>
  <div>
    <el-row
      v-if="molType == '车间'"
      type="flex"
      style="margin-bottom:12px;padding:0 20px"
    >
      <el-radio-group
        class="common-radio-border"
        style="margin-right:20px"
        v-model="search.cj"
        size="mini"
        @change="getData"
      >
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button
          v-for="(item, index) in cjOption"
          :key="index"
          :label="item['key_value']"
        ></el-radio-button>
      </el-radio-group>
    </el-row>
    <el-row
      v-if="molType == '当班'"
      type="flex"
      style="margin-bottom:12px;padding:0 20px"
    >
      <el-radio-group
        class="common-radio-border"
        style="margin-right:20px"
        v-model="search.bc"
        size="mini"
        @change="getData"
      >
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button
          v-for="(item, index) in bcOption"
          :key="index"
          :label="item['key_value']"
        ></el-radio-button>
      </el-radio-group>
    </el-row>
    <el-row
      type="flex"
      align="middle"
      style="margin-bottom:12px;padding:0 20px"
    >
      <time-picker @getTime="getTime"></time-picker>
    </el-row>
    <div v-loading="loading">
      <el-row style="padding:0 20px">
        <div class="grid-data">
          <div class="grid-item" v-for="(item, i) in header" :key="i">
            <div class="name">{{ item.gongxu }}电量消耗</div>
            <div class="sum">{{ item.sumImpEp }}</div>
            <div class="system">
              系统数据: 45210
              <i
                v-if="item.sumImpEp > 2000"
                class="el-icon-top"
                style="color:#4DD220"
              />
              <i v-else class="el-icon-bottom" style="color:#fe3d3d" />
            </div>
          </div>
        </div>
      </el-row>
      <div class="bar-chart">
        <el-radio-group
          class="toggle-chart"
          v-model="type"
          size="mini"
          fill="#2c67f6"
          text-color="#fff"
        >
          <el-radio-button label="bar">
            <svg-icon icon-class="bar" />
          </el-radio-button>
          <el-radio-button label="line"
            ><svg-icon icon-class="line"/></el-radio-button
        ></el-radio-group>
        <div ref="chart1" style="width:100%;height:100%"></div>
      </div>
      <div class="pie-chart">
        <div>
          <div ref="chart2" style="width:100%;height:100%"></div>
        </div>
        <div>
          <div ref="chart3" style="width:100%;height:100%"></div>
        </div>
        <div>
          <div ref="chart4" style="width:100%;height:100%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHzData, getPieData } from '@/api/energy.js';
import TimePicker from '@/components/TimePicker';
export default {
  props: ['molType'],
  components: { TimePicker },
  data() {
    return {
      search: {
        cj: '',
        bc: '',
        startTime: '',
        endTime: ''
      },
      type: 'bar',
      header: [],
      xAxis: [],
      yAxis: [],
      chart1: null,
      piechart2: null,
      piechart3: null,
      piechart4: null,
      loadingCount: 0
    };
  },
  watch: {
    type: function(val) {
      this.setChart(val);
    }
  },
  computed: {
    loading() {
      return this.loadingCount !== 0;
    },
    cjOption() {
      return this.$store.getters.cjOption;
    },
    bcOption() {
      return this.$store.getters.bcOption;
    }
  },
  methods: {
    getData() {
      this.loadingCount++;
      getHzData(this.search)
        .then(res => {
          if (res.code == 1) {
            let { data } = res;
            this.header = data.header;
            let xAxis = [],
              yAxis = [];
            data.header.map(item => {
              xAxis.push(item.gongxu);
              yAxis.push(item.sumImpEp);
            });
            this.xAxis = xAxis;
            this.yAxis = yAxis;
            this.setChart('bar');
            this.setPieChart(
              'chart2',
              ['#4C85FF', '#61DDAA', '#8061EF', '#FFC403', '#F2693E'],
              '前纺',
              data.ringQf
            );
          }
        })
        .finally(() => {
          this.loadingCount--;
        });
      this.loadingCount++;
      getPieData(this.search)
        .then(res => {
          if (res.code == 1) {
            let { data } = res;
            this.setPieChart(
              'chart3',
              ['#002AFF', '#166BFF', '#5591FF', '#8FB5FF', '#C6DBFF'],
              '细纱',
              data.ringXs
            );
            this.setPieChart(
              'chart4',
              ['#6C82FC', '#FF828A', '#FBBA5B', '#61DDAA', '#C6DBFF'],
              '络筒',
              data.ringLt
            );
          }
        })
        .finally(() => {
          this.loadingCount--;
        });
    },
    setChart(type) {
      this.chart1 = this.$echarts.init(this.$refs.chart1);
      let option = {
        grid: {
          left: '5%',
          right: '2%'
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 13
          },
          padding: 10,
          backgroundColor: 'rgba(66, 66, 89, 0.8)',
          formatter: function(params) {
            var result =
              '<div style="font-size:14px;font-weight:600;margin-bottom:4px">' +
              params[0].axisValue +
              '</div>';
            result +=
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
              params[0].color +
              '"></span>';
            result += params[0].axisValue + '：' + params[0].data + 'kw·h';
            return result;
          }
        },
        xAxis: {
          type: 'category',
          data: this.xAxis,
          axisTick: { show: false },
          axisLine: { lineStyle: { color: 'rgba(225,231,235)' } },
          axisLabel: { color: '#606D86' }
        },
        yAxis: {
          type: 'value',
          name: '单位：kw·h',
          nameTextStyle: { color: '#292B3D' },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#606D86' },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: 'rgba(65, 97, 128, 0.15)'
            }
          }
        },
        series: []
      };
      if (type == 'bar') {
        option.series = [
          {
            data: this.yAxis,
            type: 'bar',
            barWidth: 25,
            color: '#5B8FF9'
          }
        ];
      } else {
        option.series = [
          {
            data: this.yAxis,
            type: 'line',
            color: '#5B8FF9'
          }
        ];
      }
      this.chart1.setOption(option);
      var _this = this;
      window.addEventListener('resize', function() {
        _this.chart1.resize();
      });
    },
    setPieChart(ref, color, title, data) {
      if (title == '前纺') {
        data = data.map(item => {
          return { name: item.gongxu, value: item.sumImpEp };
        });
      } else {
        data = data.map(item => {
          return { name: item.pz, value: item.sumImpEp };
        });
      }

      this['pie' + ref] = this.$echarts.init(this.$refs[ref]);
      let option = {
        title: {
          text: title + this.molType + '电耗',
          left: 'center',
          top: 20,
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          show: false
        },
        legend: {
          bottom: '5%',
          left: 'center',
          icon: 'circle',
          itemWidth: 12
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '55%'],
            avoidLabelOverlap: true,
            color: color,
            itemStyle: {
              shadowBlur: 7,
              shadowColor: 'rgba(158, 162, 186,0.6)'
            },
            silent: true,
            label: {
              show: true,
              formatter: '{d}%',
              color: '#2C3542'
            },
            labelLine: {
              show: true
            },
            emphasis: {
              label: {
                show: false
              }
            },
            data: data
          },
          // 因为pie的中间+外部都需要展示数据，label无法同时设置两个position，所以使用两个pie重叠展示
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '55%'],
            avoidLabelOverlap: true,
            color: color,
            itemStyle: {
              shadowBlur: 7,
              shadowColor: 'rgba(158, 162, 186,0.6)'
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                formatter: '{percent|{d}%}\n{name|{b}}',
                rich: {
                  percent: {
                    fontSize: 45,
                    color: '#1E3755',
                    fontFamily: 'DINCondensed-Bold',
                    fontWeight: 'bold'
                  },
                  name: {
                    color: '#2C3542',
                    fontSize: 15
                  }
                }
              }
            },
            data: data
          }
        ]
      };
      this['pie' + ref].setOption(option);
      var _this = this;
      window.addEventListener('resize', function() {
        _this['pie' + ref].resize();
      });
    },
    getTime(val) {
      if (val) {
        this.search.startTime = val[0];
        this.search.endTime = val[1];
        this.$nextTick(() => {
          this.getData();
        });
      }
    }
  }
};
</script>

<style></style>
